import { BasicColumn, FormSchema } from '@/components/Table';
import { formatToDateTime } from '@/utils/dateUtil';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
// import { getMenuTreeApi } from '@/api/system/menu';

export const columns: BasicColumn[] = [
  {
    title: '角色编号',
    dataIndex: 'id',
    // width: 180,
  },
  {
    title: '角色名称',
    dataIndex: 'roleName',
    // width: 180,
  },
  {
    title: '权限字符',
    dataIndex: 'roleKey',
    // width: 180,
  },
  {
    title: '状态',
    dataIndex: 'roleStatus',
    // width: 180,
    customRender: ({ record }) => {
      const status = record.roleStatus;
      const enable = status === '0' ? true : false;
      const color = enable ? 'green' : 'red';
      const text = enable ? '正常' : '禁用';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
    customRender: ({ text }) => formatToDateTime(text),
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'roleName',
    label: '角色名称',
    component: 'Input',
    colProps: { span: 4 },
  },
  {
    field: 'roleStatus',
    label: '状态',
    component: 'Select',
    componentProps: {
      options: [
        { label: '正常', value: '0' },
        { label: '禁用', value: '1' },
      ],
    },
    colProps: { span: 4 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'roleName',
    label: '角色名称',
    component: 'Input',
    required: true,
    componentProps: {
      maxlength: 200,
      showCount: true,
    },
  },
  {
    field: 'roleKey',
    label: '权限字符',
    required: true,
    component: 'Input',
    componentProps: {
      maxlength: 200,
      showCount: true,
      placeholder: '请输入权限字符，仅能填写大写字母和_',
    },
    rules: [
      {
        required: true,
        message: '权限字符不能为空',
        trigger: 'change',
      },
      {
        pattern: /^[A-Z_]+$/,
        message: '权限字符只能包含大写字母和下划线',
        trigger: 'change',
      },
      { min: 5, max: 200, message: '权限字符长度必须介于 5 和 200 之间', trigger: 'change' },
    ],
  },
  {
    field: 'roleStatus',
    label: '状态',
    component: 'RadioGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: '正常', value: '0' },
        { label: '禁用', value: '1' },
      ],
    },
  },
  {
    field: 'dataScope',
    label: '权限范围',
    required: true,
    component: 'Select',
    componentProps: {
      options: [
        { value: '1', label: '全部数据权限' },
        { value: '2', label: '自定义数据权限' },
        { value: '3', label: '本部门数据权限' },
        { value: '4', label: '本部门及以下数据权限' },
      ],
    },
  },
  {
    label: ' ',
    field: 'deptIds',
    slot: 'deptIds',
    component: 'ApiTree',
    ifShow: ({ values }) => {
      return values.dataScope === '2' ? true : false;
    },
  },
];

export const menuSchema: FormSchema[] = [
  {
    field: 'roleName',
    label: '角色名称',
    component: 'Input',
    dynamicDisabled: true,
  },
  {
    field: 'roleKey',
    label: '权限字符',
    dynamicDisabled: true,
    component: 'Input',
  },
  {
    label: ' ',
    field: 'deptIds',
    slot: 'deptIds',
    component: 'ApiTree',
  },
];
